<template>
  <div class="ranch">
    <div class="search">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="display: flex; margin-top: 20px; margin-left: 8px"
      >
        <el-form-item label="牧场名称:" prop="ranchName">
          <el-input
            v-model="form.ranchName"
            size="small"
            clearable
            placeholder="牧场名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="state">
          <el-select
            v-model="form.state"
            size="small"
            placeholder="牧场状态"
            clearable
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchRanch"
            size="small"
            >查阅</el-button
          >
          <el-button size="small" @click="resetForm('form')" style="width: 75px"
            >重置</el-button
          >
          <el-button
            size="small"
            style="width: 100px; margin-left: 40px"
            type="primary"
            icon="el-icon-plus"
            @click="openAddRanch"
            >新增牧场</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="ranchCard">
      <el-card
        :body-style="{ padding: '0px' }"
        style="width: 290px; height: 370px; margin-left: 20px"
        v-for="(item, index) in cardData"
        :key="index"
      >
        <img src="@/assets/images/bg1.jpg" class="image" />
        <div style="padding: 10px; overflow: hidden">
          <span>重庆中链农科技有限公司</span>
          <div class="ranchData">
            <el-row type="flex" justify="space-between">
              <span style="margin-left: 40px">存栏量: {{ item.stock }}</span>
              <span style="margin-left: 20px"
                >耳标盘点数量: {{ item.eartagCount }}</span
              >
            </el-row>
            <el-row type="flex" justify="space-between">
              <span style="margin-left: 40px"
                >监管预警数: {{ item.warnNumber }}</span
              >
              <span style="margin-left: 15px"
                >设备离线数量: {{ item.offlineNumber }}</span
              >
            </el-row>
            <el-row>
              <span style="margin-left: 40px;">牧场名称: {{ item.ranchName }}</span>
              <span style="margin-left: 30px" v-show="item.state == 0"
                >状态: 已停用</span
              >
            </el-row>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="operation">
          <el-button type="text" @click="handDetail(item)">查看</el-button>
          <el-button type="text" @click="UpdateRanch(item)">修改</el-button>
          <el-button type="text" @click="DelRanch(item)">删除</el-button>
          <el-button type="text" @click="DeleteRanch(item)">停用</el-button>
        </div>
      </el-card>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="detail">
      <el-dialog
        title="查看详情"
        :visible.sync="dialogVisible"
        width="30%"
        center
      >
        <el-row>
          <span>牧场名称：{{ detailContent.ranchName }}</span>
          <span style="margin-left: 26px"
            >存栏量：{{ detailContent.stock }}</span
          >
          <span style="margin-left: 30px"
            >耳标盘点数量: {{ detailContent.eartagCount }}</span
          >
        </el-row>
        <el-row>
          <span>监管预警数: {{ detailContent.warnNumber }}</span>
          <span style="margin-left: 65px"
            >设备离线数量: {{ detailContent.offlineNumber }}</span
          >
          <span style="margin-left: 40px"
            >牧场状态: <span v-if="detailContent.state === 0">停用</span
            ><span v-else-if="detailContent.state === 1">启用</span></span
          >
        </el-row>
      </el-dialog>
    </div>
    <div class="updateRanch">
      <el-dialog
        title="修改牧场信息"
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <el-form label-width="100px" :model="updateFormData">
          <el-form-item label="牧场名称" class="wi-1">
            <el-input
              v-model="updateFormData.ranchName"
              clearable
              placeholder="牧场名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="存栏量" class="wi-1">
            <el-input v-model="updateFormData.stock" readonly></el-input>
          </el-form-item>
          <el-form-item label="耳标盘点数量" class="wi-1">
            <el-input v-model="updateFormData.eartagCount" clearable></el-input>
          </el-form-item>
          <el-form-item label="监管预警数" class="wi-1">
            <el-input v-model="updateFormData.warnNumber" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备离线数量" class="wi-1">
            <el-input
              v-model="updateFormData.offlineNumber"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="牧场状态:">
            <el-select
              v-model="updateFormData.state"
              size="small"
              placeholder="牧场状态"
              style="float: left"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false" style="margin-right: 40px"
            >取 消</el-button
          >
          <el-button type="primary" @click="handEditRanch">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="addRanch">
      <el-dialog title="新增牧场" :visible.sync="dialogVisible2" width="30%">
        <el-form label-width="100px" :model="addRanchData">
          <el-form-item label="牧场名称" class="wi-1">
            <el-input
              v-model="addRanchData.ranchName"
              clearable
              placeholder="牧场名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="存栏量" class="wi-1">
            <el-input
              v-model="addRanchData.stock"
              clearable
              placeholder="存栏量"
            ></el-input>
          </el-form-item>
          <el-form-item label="耳标盘点数量" class="wi-1">
            <el-input
              v-model="addRanchData.eartagCount"
              clearable
              placeholder="耳标盘点数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="监管预警数" class="wi-1">
            <el-input
              v-model="addRanchData.warnNumber"
              clearable
              placeholder="监管预警数"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备离线数量" class="wi-1">
            <el-input
              v-model="addRanchData.offlineNumber"
              clearable
              placeholder="设备离线数量"
            ></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false" style="margin-right: 40px"
            >取 消</el-button
          >
          <el-button type="primary" @click="addRanch">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cardData: [],
      form: {
        ranchName: '',
        state: ''
      },
      currentPage: 1,
      pageSize: 4,
      total: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      detailContent: [],
      updateFormData: {
        ranchId: 0,
        stock: 0,
        eartagCount: 0,
        warnNumber: 0,
        offlineNumber: 0,
        ranchName: '',
        state: ''
      },
      addRanchData: {
        ranchName: '',
        stock: '',
        eartagCount: '',
        warnNumber: '',
        offlineNumber: ''
      }
    }
  },
  methods: {
    handleSizeChange (page) {
      this.pageSize = page
      this.getRanchList()
    },
    handleCurrentChange (page) {
      this.currentPage = page
      this.searchRanch(true, false)
    },
    getRanchList () {
      const hasSearchConditions = this.form.ranchName || this.form.state
      if (hasSearchConditions) {
        this.searchRanch(true)
      } else {
        this.$axios.get('api/ranch/list', {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(res => {
          this.cardData = res.data.ranchData
          console.log(this.cardData)
          this.total = res.data.total
        })
      }
    },
    handDetail (item) {
      this.detailContent = item
      this.dialogVisible = true
      console.log(this.detailContent)
    },
    DeleteRanch (item) {
      if (item.state === 0) {
        this.$message.error('该牧场已停用，已无法进行停用操作！')
      } else {
        this.$confirm('您确认要停用该牧场吗？', '停用牧场提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/api/ranch/del', { ranchId: item.ranchId }).then(res => {
            if (res.data.code == 1) {
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
            this.getRanchList()
          })
        }).catch(() => {
          this.dialogVisible = false
        })
      }
    },
    UpdateRanch (item) {
      this.dialogVisible1 = true
      this.updateFormData.ranchId = item.ranchId
      this.updateFormData.stock = item.stock
      this.updateFormData.eartagCount = item.eartagCount
      this.updateFormData.warnNumber = item.warnNumber
      this.updateFormData.offlineNumber = item.offlineNumber
      this.updateFormData.ranchName = item.ranchName
      this.updateFormData.state = String(item.state)
      console.log(item)
    },
    handEditRanch () {
      console.log(this.updateFormData)
      this.$axios.post('/api/ranch/edit', this.updateFormData).then(res => {
        if (res.data.code == 1) {
          this.$message.success(res.data.msg)
          this.dialogVisible1 = false
          this.getRanchList()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    DelRanch (item) {
      this.$confirm('此操作将永久删除该牧场, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/api/ranch/delete', { ranchId: item.ranchId }).then(res => {
          if (res.data.code == 1) {
            this.$message.success(res.data.msg)
            if (this.cardData.length === 1 && this.currentPage > 1) {
              // 如果当前页只剩下一条数据且不是第一页，则返回前一页
              this.currentPage--
            }
            this.getRanchList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    searchRanch (isPaging = false, showSuccessMessage = true) {
      console.log(this.form)
      const data = {
        page: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        ranch: {
          ranchName: this.form.ranchName,
          state: parseInt(this.form.state)
        }
      }
      if (this.form.ranchName || this.form.state) {
        this.$axios.post('/api/ranch/search', data).then(res => {
          if (res.data.code == 1) {
            this.cardData = res.data.ranchData
            this.total = res.data.total
            if (showSuccessMessage) {
              this.$message.success(res.data.msg)
            }
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        this.getRanchList()
      }
    },
    addRanch () {
      if (this.addRanchData.ranchName === '' || this.addRanchData.stock === '' || this.addRanchData.eartagCount === '' || this.addRanchData.warnNumber === '' || this.addRanchData.offlineNumber === '') {
        this.$message.error('您有内容未填写!')
      } else {
        this.$axios.post('/api/ranch/add', this.addRanchData).then(res => {
          if (res.data.code == 1) {
            this.$message.success(res.data.msg)
            this.dialogVisible2 = false
            this.getRanchList()
            // 新增成功后重置新增表单
            this.addRanchData = {
              ranchName: '',
              stock: '',
              eartagCount: '',
              warnNumber: '',
              offlineNumber: ''
            };
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    openAddRanch () {
      console.log(this.addRanchData)
      this.dialogVisible2 = true
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.form.state = ""
    }
  },
  created () {
    this.getRanchList()
  },
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
}

.ranchData {
  float: left;
  margin-top: 10px;
  overflow: hidden;
  font-size: 12px;
}

.ranchCard {
  display: flex;
}

.image {
  width: 300px;
  height: 200px;
  display: block;
}

.el-divider {
  margin: 5px 0;
}

.operation {
  display: flex;
  justify-content: space-evenly;
}

.page {
  margin-top: 40px;
}
</style>